﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example09.aspx.cs" Inherits="Chapter36.Example09" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 36-9 绘制二次贝赛尔曲线</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <style>
        canvas {
            border: thin solid black;
        }

        body > * {
            float: left;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="140">Your browser doesn't support the <code>canvas</code> element.</canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        var startPoint = [50, 100];
        var endPoint = [400, 100];
        var currentPoint1 = [250, 50];

        canvas.onmousemove = function (e) {
            if (e.shiftKey) {
                currentPoint1 = [e.clientX, e.clientY];
            } 
            ctx.clearRect(0, 0, 500, 140);
            draw();
        }

        draw();

        function draw() {
            ctx.lineWidth = 3;
            ctx.strokeStyle = 'black';
            ctx.beginPath();
            ctx.moveTo(startPoint[0], startPoint[1]);
            ctx.quadraticCurveTo(currentPoint1[0], currentPoint1[1], endPoint[0], endPoint[1]);
            ctx.stroke();

            ctx.lineWidth = 1;
            ctx.strokeStyle = 'red';
            var points = [startPoint, endPoint, currentPoint1];
            for (var i = 0; i < points.length; i++) {
                drawPoint(points[i]);
            }
            drawLine(startPoint, currentPoint1);
            drawLine(endPoint, currentPoint1);

            function drawPoint(point) {
                ctx.beginPath();
                ctx.strokeRect(point[0] - 2, point[1] - 2, 4, 4);
            }

            function drawLine(form,to) {
                ctx.beginPath();
                ctx.moveTo(form[0], form[1]);
                ctx.lineTo(to[0], to[1]);
                ctx.stroke();
            }
        }        
    </script>
</body>
</html>
